<!doctype html>
<html>
  <body>
    <input id="input" type="file" />
    <input id="input-multiple" multiple type="file" />
    <input id="input-disabled" disabled type="file" />
    <input id="text-input" type="text" />
    <script>
      const allEvents = {events: []};
      const onEvent = (event) => {
        allEvents.events.push({
          type: event.type,
          files: [...event.target.files].map((file) => file.name),
        });
      };

      const input = document.getElementById('input');
      input.addEventListener('input', onEvent);
      input.addEventListener('change', onEvent);
      input.addEventListener('cancel', onEvent);

      const multipleInput = document.getElementById('input-multiple');
      multipleInput.addEventListener('input', onEvent);
      multipleInput.addEventListener('change', onEvent);
      multipleInput.addEventListener('cancel', onEvent);
    </script>
  </body>
</html>
